<template>
  <div class="list">
    <div class="list-one">
      <van-icon name="arrow-left" @click="btnhome" />
      <div class="searchs">
        <span
          ><router-link to="/CityList">{{ areaList.label }}</router-link
          ><van-icon name="arrow-down"
        /></span>
        <span>|</span>
        <span
          ><van-icon name="search" /><input
            type="text"
            placeholder="请输入小区或地址"
            v-model="str"
        /></span>
      </div>
      <van-icon name="user-circle-o" @click="gomap" />
    </div>

    <div class="list-two">
      <van-dropdown-menu>
        <van-dropdown-item title="区域" ref="item">
          <van-picker
            :columns="area"
            value-key="label"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            :default-index="1"
            :loading="loading"
          />
        </van-dropdown-item>
        <van-dropdown-item title="方式" ref="item">
          <van-picker
            :columns="rentType"
            value-key="label"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            :loading="loading"
          />
        </van-dropdown-item>
        <van-dropdown-item title="租金" ref="item">
          <van-picker
            :columns="price"
            value-key="label"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            :loading="loading"
          />
        </van-dropdown-item>
        <van-dropdown-item
          title="筛选"
          ref="item"
          @open="
            () => {
              this.show = !this.show;
            }
          "
        >
          <van-popup
            v-model="show"
            position="right"
            get-container="body"
            :style="{ width: '70%', height: '100%' }"
          >
            <div class="con">
              <div class="roomType">
                <p>户型</p>
                <ul>
                  <li
                    v-for="(v, i) in roomType"
                    :key="i"
                    @click="btnactive(i, v.value)"
                    ref="actioe"
                  >
                    {{ v.label }}
                  </li>
                </ul>
              </div>

              <div class="oriented">
                <p>朝向</p>
                <ul>
                  <li
                    v-for="(item, index) in oriented"
                    :key="index"
                    @click="btnactive1(index, item.value)"
                    ref="active"
                  >
                    {{ item.label }}
                  </li>
                </ul>
              </div>

              <div class="floor">
                <p>楼层</p>
                <ul>
                  <li
                    v-for="(item, index) in floor"
                    :key="index"
                    @click="btnactive2(index, item.value)"
                    ref="activv"
                  >
                    {{ item.label }}
                  </li>
                </ul>
              </div>

              <div class="characteristic">
                <p>房屋亮点</p>
                <ul>
                  <li
                    v-for="(item, index) in characteristic"
                    :key="index"
                    @click="btnactive3(index, item.value)"
                    ref="activvv"
                  >
                    {{ item.label }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="con2">
              <span>清除</span>
              <span @click="back">确定</span>
            </div>
          </van-popup>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div class="list-three">
      <dl
        v-for="(item, index) in listlis"
        :key="index"
        @click="btndetail(item)"
      >
        <dt>
          <img :src="'http://47.102.145.189:8009' + item.houseImg" alt="" />
        </dt>
        <dd>
          <p>{{ item.desc }}</p>
          <p>{{ item.title }}</p>
          <p>{{ item.price }}</p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      area: [],
      rentType: [],
      price: [],
      roomType: [],
      oriented: [],
      floor: [],
      characteristic: [],

      listList: [],
      show: false,
      loading: true,
      str: "",
    };
  },

  computed: {
    ...mapState(["areaList"]),

    listlis() {
      let arr = [];
      for (let i = 0; i < this.listList.length; i++) {
        if (this.listList[i].desc.search(this.str) != -1) {
          arr.push(this.listList[i]);
        }
      }
      return arr;
    },
  },
  methods: {
    ...mapMutations(["setHis"]),

    btnhome() {
      this.$router.push("/Home");
    },
    back() {
      this.show = false;
    },
    gomap() {
      this.$router.push("/Map");
    },

    list() {
      this.$http.get(`/houses?cityId=${this.areaList.value}`).then((res) => {
        this.listList = res.data.body.list;
      });
    },

    //详情
    btndetail(item) {
      this.$router.push({ path: "/Detail", query: { id: item.houseCode } });
      this.setHis(item);
    },

    //户型高亮
    btnactive(i, value) {
      this.$refs.actioe[i].classList.toggle("active");
    },
    //朝向高亮
    btnactive1(index, value) {
      this.$refs.active[index].classList.toggle("active");
    },
    //楼层高亮
    btnactive2(index, value) {
      this.$refs.activv[index].classList.toggle("active");
    },
    //房屋亮点高亮
    btnactive3(index, value) {
      this.$refs.activvv[index].classList.toggle("active");
    },
    getData() {
      this.$http
        .get(`/houses/condition?id=${this.areaList.value}`)
        .then((res) => {
          console.log(res);
          if (res.data.status === 200) {
            this.area.push(res.data.body.area);
            this.area.push(res.data.body.subway);
            this.rentType = res.data.body.rentType;
            this.price = res.data.body.price;
            this.roomType = res.data.body.roomType;
            this.oriented = res.data.body.oriented;
            this.floor = res.data.body.floor;
            this.characteristic = res.data.body.characteristic;

            this.loading = false;
          }
        });
    },

    onConfirm(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      console.log("取消");
    },
  },

  created() {
    this.list();
    this.getData();
  },
};
</script>

<style>
.list {
  width: 100%;
  height: auto;
  background: #e6e6e6;
  position: relative;
}
.list-one {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}
.list-one i {
  font-size: 18px;
}
.searchs {
  height: 30px;
  flex: 1;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin: 0 5px;
  font-size: 14px;
}
.searchs input {
  border: none;
  width: 100%;
}
.searchs span:nth-child(1) {
  margin: 0 15px;
}
.searchs span:nth-child(3) {
  display: flex;
  margin: 0 15px;
  justify-content: center;
  align-items: center;
}
.list-two {
  position: sticky;
  top: 0;
  z-index: 0;
  border-bottom: 1px solid #ccc;
}
.list-three {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 0 10px;
}
.list-three dl {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
.list-three dl dt {
  width: 30%;
  height: 95%;
}
.list-three dl dt img {
  width: 100%;
  height: 100%;
}
.list-three dl dd {
  font-size: 14px;
  padding: 0 10px;
}
.van-popup {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
}
.con {
  flex: 1;
  overflow-y: scroll;
}
.con2 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 16px;
  border-top: 1px solid #e6e6e6;
}
.con2 span:nth-child(1) {
  color: greenyellow;
  padding: 14px 27px;
}
.con2 span:nth-child(2) {
  color: #fff;
  background: green;
  padding: 14px 85px;
}
.roomType {
  width: 100%;
  padding: 0 10px;
}
.roomType p {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.roomType ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 30px;
}
.roomType ul li {
  width: calc(100% / 3);
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  margin: 8px 0;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}
.oriented {
  width: 100%;
  padding: 0 10px;
}
.oriented p {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.oriented ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 30px;
}
.oriented ul li {
  width: calc(100% / 3);
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  margin: 8px 0;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}
.floor {
  width: 100%;
  padding: 0 10px;
}
.floor p {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.floor ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 30px;
}
.floor ul li {
  width: calc(100% / 3);
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  margin: 8px 0;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}
.characteristic {
  width: 100%;
  padding: 0 10px;
}
.characteristic p {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.characteristic ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding-bottom: 30px;
}
.characteristic ul li {
  width: calc(100% / 3);
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  margin: 8px 0;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}
.active {
  background: #21b97a;
  color: #fff;
}
</style>